<template>
  <div class="page-card address-book">
    <h-query :showKey="['title']" :query="query" @search="search">
      <!-- <h-tooltip slot="btn" title="新增成功后为什么没数据" /> -->
      <div class="a-button-right flex">
        <UploadExcel action="/web/mailList/read_mailList" download="/web/mailList/write_mailList" @change="refresh" />
        <a-button type="primary" @click="add">添加通讯录</a-button>
      </div>

    </h-query>
    <!-- <h-table
      ref="htable"
      @init="getList"
      :config="config"
      :showHeadBgNone="false"
      :zebraStripes="false">
      <span slot="img" slot-scope="{text}">
        <a-avatar :src="text" :size="36"></a-avatar>
      </span>
      <span slot="action" slot-scope="{record}">
        <a @click="edit(record)">修改</a>
        <a-divider type="vertical"></a-divider>
        <a class="red" @click="remove(record)">删除</a>
      </span>
    </h-table> -->

    <a-tabs size="large" v-model="tabKey" @change="changeTab">
      <a-tab-pane v-for="(item, i) in tab" :key="i" :tab="item">
        <h-table
          :ref="`htable${i}`"
          @init="getList($event, i)"
          :config="config[i]"
          :showHeadBgNone="false"
          :zebraStripes="false">
          <span slot="img" slot-scope="{text}">
            <a-avatar :src="text" :size="36"></a-avatar>
          </span>
          <span slot="action" slot-scope="{record}">
            <a @click="edit(record, i)">修改</a>
            <a-divider type="vertical"></a-divider>
            <a class="red" @click="remove(record, i)">删除</a>
          </span>
        </h-table>
      </a-tab-pane>
    </a-tabs>

    <createAddress ref="createSafe" v-model="show" @submit="submit" />
  </div>
</template>
<script>
import { addressList, delMailList } from '@/api/serve';
import createAddress from './action/createAddress';
import UploadExcel from '@/components/UploadExcel/Index';

export default {
  components: {
    createAddress,
    UploadExcel
  },
  data() {
    return {
      show: false,
      tabKey: 0,
      tab: ['网站联系人', '重点账号', '部门联系人'],
      config: [],
      form: {

      },
      query: [
        {
          key: 'depart',
          label: '所属单位',
          type: 'input'
        }
      ],
      selectedRowKeys: [],
      selectedRow: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10
      }
    };
  },
  created() {
    for (let i = 0; i <= 2; i++) {
      this.config.push({
        rowKey: 'id',
        bordered: true,
        dataSource: [],
        columns: [
          {
            align: 'center',
            title: '序号',
            dataIndex: 'index',
            scopedSlots: { customRender: 'index' }
          },
          // {
          //   align: 'center',
          //   title: '头像',
          //   dataIndex: 'img',
          //   scopedSlots: { customRender: 'img' }
          // },
          {
            align: 'center',
            title: '姓名',
            dataIndex: 'name'
          },
          {
            align: 'center',
            title: '所属单位',
            dataIndex: 'company'
          },
          {
            align: 'center',
            title: '所属部门',
            dataIndex: 'depart'
          },
          {
            align: 'center',
            title: '职位',
            dataIndex: 'position'
          },
          {
            align: 'center',
            title: '手机号',
            dataIndex: 'phone'
          },
          {
            align: 'center',
            title: '邮箱',
            dataIndex: 'email'
          },
          {
            align: 'center',
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        pagination: {
          total: 100
        }
      });
    }
  },
  methods: {
    getList(params, i) {
      if (params) {
        Object.assign(this.queryParams, params);
      }
      addressList({ ...this.queryParams, type: i }).then(res => {
        this.config[i].dataSource = res.data.records;
        this.config[i].pagination.total = res.data.total;
      });
    },
    remove({ id }) {
      const that = this;
      this.$confirm({
        title: '温馨提示',
        content: '确定要删除吗？',
        onOk() {
          delMailList({
            id,
            isDelete: -1
          }).then(res => {
            that.$message.success('删除成功');
            that.$refs.htable.refresh(true);
          });
        }
      });
    },
    refresh() {
      this.$refs[`htable${this.tabKey}`][0].refresh(true);
    },
    search(params) {
      console.log(this.tabKey, this.$refs[`htable${this.tabKey}`]);
      Object.assign(this.queryParams, { ...params, name: params.title, type: this.tabKey });
      this.$refs[`htable${this.tabKey}`][0].refresh();
    },
    changeTab() {
      setTimeout(() => {
        Object.assign(this.queryParams, { type: this.tabKey });
        this.$refs[`htable${this.tabKey}`][0].refresh();
      }, 300);
    },
    add() {
      this.show = true;
      this.$refs.createSafe.add();
    },
    edit(record) {
      this.show = true;
      this.$refs.createSafe.edit(record);
    },
    submit() {
      this.$refs[`htable${this.tabKey}`][0].refresh();
    }
  }
};
</script>
<style lang="less" scoped>
.address-book {
  // .a-button-blue {
  //   position: absolute;
  //   right: 0;
  //   top: 0;
  // }
}
.flex {
  display: flex;
}
</style>
